<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="close">
    <el-form ref="dialogForm" :model="dialogFormData">
    <el-form-item>
        <slot name="upload"></slot>
    </el-form-item>
    <el-form-item 
      v-for="(v,k) in dialogFormData"
      :key="k"
      :label="v.label" 
      :label-width="formLabelWidth"
      :prop="(k+'.value')"
      :rules="[{
        required:true,
        trigger:'blur',
        message:v.label+'不能为空'
      }]">
        <el-input 
        v-model="v.value" 
        autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button @click="confirm(dialogForm)" type="primary" >
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref,watchEffect,toRefs} from "vue"
// 想法：
    // 1、根据传入的数据，自动创建出form表单元素，现在默认使用input
    // 2、表单需要具备能够校验属性的功能
    // 3、表单通过或者不通过，可以回调对应的方法
    // 4、控制显示隐藏的属性
    // 5、控制labelWidth的属性


// 说明文档
    // 属性
        // 1、visible:Boolean  控制dialog的显示与隐藏
        // 2、dialogFormData：Object   表单的数据{name:{label:"item的描述",value:"对应的值"}}
        // 3、formLabelWidth:String label的宽度
        // 4、title:String  dialog的标题
    // 方法
        // 1、validateSuccess  点击确定按钮 ，表单校验通过之后触发，回传一个valid
        // 2、dialogCancel  点击取消按钮，触发的事件
        // 3、closed  dialog被关闭的时候触发的事件，回传dialogFormVisible的值


let props = defineProps({
    // dialog标题
    title:{
        type:String,
        default(){
            return '增加学员信息'
        }
    },
    // 控制表单显示隐藏
    visible:{
        type:Boolean,
        default(){
            return false
        }
    },
    // 控制表单的校验的
    rules:{
        type:Array,
        default(){
            return []
        }
    },
    // 弹窗表单中的数据来源
    dialogFormData:{
        type:Object,
        default(){
            return {}
        }
    },
    // 
    formLabelWidth:{
        type:String,
        default(){
            return '140px'
        }
    }
})

// 声明表单校验通过之后的回调
let emits = defineEmits(['validateSuccess','dialogCancel','closed'])



// 初始值，定义为传递下来的初始值显示隐藏
let dialogFormVisible = ref(false)

// 使用watchEffect来侦听visible的变化
// 解构props中的visible属性
let {visible} =toRefs(props)
// 实时侦听visible props的变化，控制dialog的显示与隐藏
watchEffect(()=>{
    // console.log(visible.value)
    dialogFormVisible.value = visible.value
})


// 声明取消和确定的方法
// 点击取消
let cancel = () => {
    emits('dialogCancel')
}

// 点击确定
// 声明一个ref引用dialog的结构
let dialogForm = ref()

let confirm = (form) => {
    form.validate(valid =>{
        if(valid){
            // 表单校验通过
            emits('validateSuccess',dialogForm)
        }else{
            // 表单校验不通过
            // dialogFormVisible.value = false
        }
    })
    
}

// dialog被关闭的时候触发的事件
let close = () =>{
    emits('closed')
}

</script>





